<template>
	<view class="weui-grids home-grid">
		<block v-for="(item,index) in marks" :key="index">
			<view @click="onItemClick(item.title)">
				<view class="weui-grid grid-item">
					<image class="grade-image" :src="item.image"></image>
					<view class="weui-grid__label grid-item_label">{{item.title}}</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		poetryRank
	} from "@/router.js"
	export default {
		data() {
			return {
				marks: []
			}
		},
		onLoad(options) {
			this.getMarkList()
		},
		methods: {
			getMarkList() {
        this.$tools.showLoading()
				uniCloud.callFunction({
					name: 'database',
					data: {
						collection: 'poetry',
						type: 'mark'
					},
					success: (res) => {
            uni.hideLoading()
						console.log(res)
						let result = res.result.data
						if (result && result.length > 0) {
							let marks = result[0].marks
							this.marks = marks
						}
					}
				})
			},
			//item点击事件
			onItemClick(title) {
				console.log(title)
				uni.navigateTo({
					url: poetryRank + `?title=${title}`
				})
			}
		}
	}
</script>

<style>
	.home-grid {
		margin: 10px 15px;
    padding-bottom: 10px;
	}

	.grid-item {
    position: relative;
		width: 50%;
		padding: 5px 5px;
		text-align: center;
		border-right: 1px solid #e9e7ef;
		border-bottom: 1px solid #e9e7ef;
	}

	.grade-image {
		width: 150px;
		height: 112px;
    opacity: 0.9;
	}

	.grid-item_label {
    position: absolute;
    top: 81px;
    width: 100%;
    font-size: 17px;
    font-weight: 565;
    color: #3628a1;
    text-shadow: 2px 3px 1px #d84858;
	}
</style>
